<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <script src="../public/cdn/vue/2.6.10/vue.js" charset="utf-8"></script>
        <link rel="stylesheet" href="../public/cdn/element-ui/2.15.6/theme-chalk/index.css">
        <script src="../public/cdn/element-ui/2.15.6/index.js" charset="utf-8"></script>
        <link rel="stylesheet" href="../public/cdn/avue/2.9.5/index.css">
        <script type="text/javascript" src="../public/cdn/avue/2.9.5/avue.js"></script>
    </head>

    <body>
        <div id="app">
            <el-card>
                <el-button @click="submit"
                           type="primary">全局水印</el-button>
                <el-button @click="submit1"
                           type="primary">局部水印</el-button>
                <el-button @click="del"
                           type="danger">删除水印</el-button>
                <br /> <br />
                <div id="test"
                     style="width:300px;height:300px;border:1px solid #ccc;position:relative;"></div>
            </el-card>
        </div>
    </body>
    <script>
        var app = new Vue({
            el: '#app',
            components: {},
            data: {
                obj: '',
                obj1: '',
                create: false
            },
            watch: {},
            created() {},
            mouted() {
            },
            computed: {},
            methods: {
                submit() {
                    if(this.create){
                        this.$message.success('已经创建水印了')
                        return
                    }
                    this.create=true;
                    this.$message.success('添加水印成功')
                    this.obj = this.watermark({text:'avue全局水印'})
                },
                submit1() {
                    this.obj1 = this.watermark({
                        id:'test',
                        fontSize:'14px',
                        width:'100',
                        height:'80',
                        text:'avue局部水印'
                    })
                },
                del(){
                    this.obj.remove();
                    this.obj1.remove();
                    this.create = false;
                },
            }
        })
    </script>
</html>
